<template>
  <div class="article-item" @click="blogPage(blog.id)">
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="header">
          <div class="tit" v-text="blog.title">
            这里是文章的标题
          </div>
          <div class="intro" v-text="blog.description">
            这里填写的是介绍的内容,如果超出一定长度将会以省略号的形式在末尾出现!!!
          </div>
        </div>
        <div class="tags">
          <div class="tag">
            <el-tag class="item">#</el-tag>
          </div>
        </div>
        <div class="extra">
          <p class="user">
            <el-avatar class="user-face" :size="25" :src="blog.userAvatar | filterImg"></el-avatar>
            {{ blog.username }}
          </p>
          <p><i class="el-icon-date"></i>{{ blog.createTime }}</p>
          <p><i class="el-icon-chat-line-round"></i>44</p>
          <p><i class="el-icon-third-praise_fill"></i>44</p>
          <p v-if="deleteVisible">
            <el-link :underline="false" @click.stop="deleteBlog"><i class="el-icon-delete"></i></el-link>
          </p>
        </div>
      </el-col>
      <el-col :span="8">
        <el-image class="cover" style="width: 100%;height: 120px" fit="cover"
                  :src="blog.picture | filterImg"></el-image>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ArticleItem",
  props: {
    blog: Object,
    deleteVisible: {
      type: Boolean,
      default: false
    }
  },
  created() {
  },
  methods: {
    blogPage(id) {
      let {href} = this.$router.resolve({path: `/blog/${id}`})
      window.open(href, '_blank')
    },
    deleteBlog() {
      this.$emit('deleteBlog', this.blog.id)
    }
  }
}
</script>

<style scoped>

.article-item {
  padding: 10px 0;
  border-bottom: 1px solid #ececec;
}


.article-item .cover {
  border-radius: 4px;
}

.article-item .header .tit {
  color: #458AD9;
  font-size: 18px;
  font-weight: 500;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.article-item .header .intro {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #333333;
  line-height: 3;
  cursor: pointer;
}

.article-item .tag {
  border-radius: 15px;
  display: inline-block;
  overflow: hidden;
  margin-right: 20px;
  font-size: 13px;
}

.article-item .extra {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 5px;
}

.article-item .extra p {
  margin: 0 25px 0 0;
  font-size: 14px;
  line-height: 17px;
  color: #999999;
}

.article-item .extra p i {
  margin-right: 3px;
}

.article-item .extra .user {
  display: flex;
  align-items: center;
}

.article-item .extra .user .user-face {
  margin-right: 5px;
}

.tags .tag {
  cursor: pointer;
}

</style>
